<style lang="scss" scoped>
.icon-img {
  margin-bottom: 10px;
}

.icon-font {
  font-size: 13px;
}

.ubom10rpx {
  clear: both;
  height: 5px;
}

.utitle {
  padding-top: 10px;
  width: 100%;
  height: 55px;
  text-align: center;
  background: #fff;
}

.mtitle {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.ztitle {
  font-size: 8px;
  color: #999;
}

.characteristic {
  height: 195px;
  width: 100%;
  background: #fff;
  padding: 10px 10px;
}

.characteristic img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.environmental {
  width: 100%;
  background: #fff;
  padding: 10px 10px;
}

.environmental img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.pleft {
  float: left;
  width: 60%;
  height: 175px;
}

.pright {
  float: right;
  width: 38%;
  height: 175px;
}

.pright .psmall {
  width: 100%;
  height: 85px;
}

.pbig {
  clear: both;
  width: 100%;
  height: 195px;
}
</style>

<template>
  <div ref="container" class="container hasNav hasTabbar">
    <van-nav-bar title="美容纹绣" fixed />
    <van-swipe :height="175" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <van-image fit="cover" :src="fileApi + item.picUrl"></van-image>
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" :column-num="3">
      <van-grid-item to="/service/index">
        <img class="icon-img" width="60" height="60" src="@/assets/img/nav_icon_01.png" />
        <span class="icon-font">美容服务</span>
      </van-grid-item>
      <van-grid-item to="/custom/index">
        <img class="icon-img" width="60" height="60" src="@/assets/img/nav_icon_02.png" />
        <span class="icon-font">客户风采</span>
      </van-grid-item>
      <van-grid-item to="/common/about">
        <img class="icon-img" width="60" height="60" src="@/assets/img/nav_icon_03.png" />
        <span class="icon-font">联系我们</span>
      </van-grid-item>
    </van-grid>

    <div class="utitle">
      <div class="mtitle">成功案例</div>
      <div class="ztitle">case</div>
    </div>

    <div class="characteristic" @click="linkCustomTo()">
      <div class="pleft">
        <img src="@/assets/img/case_1.png" />
      </div>
      <div class="pright">
        <div class="psmall">
          <img src="@/assets/img/case_2.png" />
        </div>
        <div class="ubom10rpx"></div>
        <div class="psmall">
          <img src="@/assets/img/case_3.png" />
        </div>
      </div>
    </div>

    <div class="utitle">
      <div class="mtitle">室内环境</div>
      <div class="ztitle">environmental</div>
    </div>

    <div class="environmental" @click="linkServiceTo()">
      <div class="pbig">
        <img src="@/assets/img/env1.jpeg" />
      </div>
      <div class="ubom10rpx"></div>
      <div class="pleft">
        <img src="@/assets/img/env2.jpeg" />
      </div>
      <div class="pright">
        <img src="@/assets/img/env3.jpeg" />
      </div>
      <div class="ubom10rpx"></div>
      <div class="pbig">
        <img src="@/assets/img/env4.jpg" />
      </div>
    </div>

    <Loading :isShow="loading"></Loading>
    <!-- 返回顶部 -->
    <back-top selector=".container"></back-top>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import mixin from '@/mixin/index';
import Loading from '@/components/Loading';
import Tabbar from '@/components/Tabbar';
import BackTop from '@/components/BackTop';
import { getBannerList } from '../api/index';
const fileUrl = process.env.VUE_APP_FILE_URL;

export default {
  name: 'Home',
  components: {
    BackTop,
    Loading,
    Tabbar,
  },
  mixins: [mixin],
  data() {
    return {
      loading: true,
      banners: [],
      fileApi: fileUrl,
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    ...mapMutations(['setBanners']),
    async getData(clear = false) {
      try {
        this.loading = true;
        const { code, message, data } = await getBannerList({ position: 1 });
        if (code == 200) {
          if (data.length !== 0) {
            this.banners = data;
            this.setBanners(data);
          }
        } else {
          this.$toast(message);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

    linkCustomTo(id) {
      this.$router.push({
        path: '/custom/index'
      });
    },

    linkServiceTo(id) {
      this.$router.push({
        path: '/service/index'
      });
    },
  }
};
</script>